<template>
  <div>
    <el-card class="box-card">
      <el-breadcrumb separator="/" style="margin-bottom: 20px">
        <el-breadcrumb-item>会议管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/welcome/car' }"
        >会议预订
        </el-breadcrumb-item
        >
      </el-breadcrumb>
      <template>
        <el-row :gutter="20">
          <el-col :span="2"> 目的地:</el-col>
          <!-- <i s:span="1">  目的地:</i> -->
          <el-col :span="3" class="demo-input-suffix">
            <el-input
              placeholder="目的地："
              clearable
              style="display: inline"
              v-model="params.destination"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="2"> 申请人:</el-col>
          <el-col :span="3">
            <!-- 申请人: -->
            <el-input
              placeholder="申请人："
              clearable
              v-model="params.proposer"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="2"> 联系人:</el-col>
          <el-col :span="3">
            <!-- 联系人: -->
            <el-input
              placeholder="联系人："
              clearable
              v-model="params.contactsName"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="7">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="display: inline"
              @click="search(0)"
            >搜索
            </el-button
            >
          </el-col>
          <el-col :span="7">
            <el-button
              type="primary"
              icon="el-icon-search"
              style="display: inline"
              @click="exportData"
              >导出</el-button
            > 
          </el-col>

          <br/>
          <el-col :span="3"> 发车时间 &ge;</el-col>
          <el-col :span="4">
            <el-input
              placeholder="发车时间 >="
              clearable
              type="date"
              style="display: inline-flex"
              v-model="params.departureTime"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>
          <el-col :span="3"> 回程时间 &le;</el-col>
          <el-col :span="5">
            <!-- 回程时间 <= -->
            <el-input
              placeholder="回程时间 <=："
              clearable
              type="date"
              style="display: inline-flex"
              v-model="params.flybackTime"
            >
              <!-- <i slot="prefix" class="el-input__icon el-icon-search"></i> -->
            </el-input>
          </el-col>

          <el-col :span="3">
            <el-button type="primary" @click="showAddDialog"
            ><i class="el-icon-plus"></i>添加
            </el-button
            >
          </el-col>
          <el-badge v-model="did" class="item">
            <el-button size="small" @click="search(1)">回复</el-button>
          </el-badge>
        </el-row>
      </template>
      <!--审核-->
      <div>
        <el-dialog
          title="审核"
          :close-on-click-modal="false"
          :visible.sync="audit"
          :show-close="true" width="850px">
          <el-form :model="conferenceRoot"
                   label-width="auto"
                   label-position="top"
                   :inline="true"
                   ref="furniture"
                   :rules="rules"
          >
            <div style="align-content: center">
              <template>
                <el-radio-group v-model="car.staticId">
                  <el-radio :value="1" :label="1">未回复</el-radio>
                  <el-radio :value="2" :label="2">已回复</el-radio>
                  <el-radio :value="3" :label="3">准备就绪</el-radio>
                  <el-radio :value="4" :label="4">会议签到</el-radio>
                  <el-radio :value="5" :label="5">进行中</el-radio>
                  <el-radio :value="6" :label="6">会议结束</el-radio>
                  <el-radio :value="7" :label="7">归档</el-radio>
                  <el-radio :value="8" :label="8">已取消</el-radio>
                </el-radio-group>
              </template>
            </div>
            <el-form-item>
              <el-button type="primary" @click="updateAudit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <el-dialog
        title="车辆预定:  "
        :close-on-click-modal="false"
        :visible.sync="addDialogVisible"
        :show-close="true"
      >
        <el-form :model="car" ref="car" :rules="rules">
          <el-form-item
            label="发车时间"
            prop="departureTime"
            :label-width="formLabelWidth"
          >
            <!-- <el-input v-model="car.departureTime" type="date"></el-input> -->
            <el-date-picker
              v-model="car.departureTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="发车时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="回程时间"
            prop="flybackTime"
            :label-width="formLabelWidth"
          >
            <!-- <el-input v-model="car.flybackTime" type="date"></el-input> -->
            <el-date-picker
              v-model="car.flybackTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="回程时间"
              default-time="12:00:00"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="目的地"
            prop="destination"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.destination"></el-input>
          </el-form-item>
          <el-form-item
            label="乘车人数"
            prop="price"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.price"></el-input>
          </el-form-item>
          <el-form-item
            label="联系人"
            prop="contactsName"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.contactsName"></el-input>
          </el-form-item>
          <el-form-item
            label="联系手机"
            prop="phone"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.phone"></el-input>
          </el-form-item>
          <el-form-item
            label="司机性质"
            prop="driver"
            :label-width="formLabelWidth"
          >
            <!-- <el-input v-model="car.driver"></el-input> -->
            <el-radio-group v-model="car.driver">
              <el-radio :label="0">全程</el-radio>
              <el-radio :label="1">接人</el-radio>
              <el-radio :label="2">送</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="是否过夜"
            prop="overnight"
            :label-width="formLabelWidth"
          >
            <!-- <el-input v-model="car.overnight" ></el-input> -->
            <el-radio v-model="car.overnight" :label="0">否</el-radio>
            <el-radio v-model="car.overnight" :label="1">是</el-radio>
          </el-form-item>
          <el-form-item
            label="要求："
            prop="requirements"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="car.requirements"
              type="textarea"
              :rows="5"
              resize="none"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser('car')">保存</el-button>
        </div>
      </el-dialog>

      <!-- <el-dialog
        title="信息:  "
        :close-on-click-modal="false"
        :visible.sync="addDialogVisibles"
        :show-close="true"
      >
        <el-form :model="car" ref="car" :rules="rules">
          <el-form-item
            label="信息"
            prop="departureTime"
            :label-width="formLabelWidth"
          >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addUser('car')">保存</el-button>
        </div>
      </el-dialog> -->

      <el-dialog
        title="车辆预定详情"
        :close-on-click-modal="false"
        :visible.sync="editDialogVisible"
        :show-close="true"
      >
        <el-form :model="car" ref="car" :rules="rules">
          <el-form-item
            label="部门名称"
            prop="car.id"
            :label-width="formLabelWidth"
          >
            <el-input v-model="car.id"></el-input>
          </el-form-item>
        </el-form>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateUser('user')">保存</el-button>
        </div> -->
      </el-dialog>

      <el-table border :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="destination" label="目的地"></el-table-column>
        <el-table-column
          prop="departureTime"
          label="发车时间"
        ></el-table-column>
        <el-table-column prop="flybackTime" label="回程时间"></el-table-column>
        <el-table-column prop="price" label="人数"></el-table-column>
        <el-table-column prop="vehicleName" label="派发车辆"></el-table-column>
        <el-table-column prop="driver" label="时间性质"></el-table-column>
        <el-table-column
          prop="overnightName"
          label="是否过夜"
        ></el-table-column>
        <el-table-column prop="contactsName" label="联系人"></el-table-column>
        <el-table-column
          prop="departmentName"
          label="用车部门"
        ></el-table-column>
        <el-table-column prop="startingTime" label="发起时间"></el-table-column>
        <el-table-column prop="staticName" label="订单状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popover placement="top-start" width="200" trigger="hover">
              <el-row>
                <div style="text-align: center">
                  <el-button
                    type="info"
                    plain
                    size="small"
                    style="margin-bottom: 20px"
                  >短信重发
                  </el-button
                  >
                  <el-button
                    type="info"
                    plain
                    size="small"
                    @click="selectById(scope.row)"
                  >查看详情
                  </el-button
                  >
                  <br/>
                  <el-button type="info" plain size="small">打印订单</el-button>
                  <el-button
                    type="info"
                    plain
                    size="small"
                    @click="deletes(scope.row)"
                  >取消订单
                  </el-button
                  >
                </div>
              </el-row>
              <el-button v-if=" scope.row.staticId==null" type="info" plain @click="auditUpdate(scope.row)">
                审核
              </el-button>

              <el-button slot="reference">管理</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <template>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="params.total"
        >
        </el-pagination>
      </template>
    </el-card>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        tableData: [],
        params: {
          pageSize: 5, // 每页显示5条记录
          pageIndex: 1, // 当前第几页
          total: 0, // 共几条记录去分页
          destination: '', //目的地
          proposer: '', //申请人名称
          contactsName: '', //联系人
          departureTime: '', //发车时间
          flybackTime: '', //回程时间
        },
        did: 0,
        car: {
          id: '', //id
          departureTime: '', //发车时间
          flybackTime: '', //回程时间
          destination: '', //目的地
          proposerName: '', //申请人名称
          contactsName: '', //联系人
          price: '', //乘车人数
          phone: '', //联系手机
          driver: 0, //司机性质
          overnight: 1, //是否过夜
          requirements: '', //需求说明

          staticId: '',//状态
        },
        carDto: {
          id: '', //id
          departureTime: '', //发车时间
          flybackTime: '', //回程时间
          destination: '', //目的地
          proposerName: '', //申请人名称
          contactsName: '', //联系人
          price: '', //乘车人数
          phone: '', //联系手机
          driver: 0, //司机性质
          overnight: 1, //是否过夜
          requirements: '', //需求说明
        },
        addDialogVisible: false,
        editDialogVisible: false,
        audit: false,
        formLabelWidth: '120px',
        rules: {
          departureTime: [
            {
              required: true,
              message: '请输入发车时间',
              trigger: 'blur'
            },
          ],
          flybackTime: [
            {
              required: true,
              message: '请输入回程时间',
              trigger: 'blur'
            },
          ],
          destination: [
            {
              required: true,
              message: '请输入目的地',
              trigger: 'blur'
            },
          ],
          contactsName: [
            {
              required: true,
              message: '请输入联系人',
              trigger: 'blur'
            },
          ],
          price: [
            {
              required: true,
              message: '请输入人数',
              trigger: 'blur'
            },
            {
              validator: function (rule, value, callback) {
                if (/[0-9]*$/i.test(value) == false) {
                  callback(new Error('请输入人数'))
                } else {
                  //校验通过
                  callback()
                }
              },
              trigger: 'blur',
            },
          ],
          phone: [
            {
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              validator: function (rule, value, callback) {
                if (
                  /^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(
                    value
                  ) == false
                ) {
                  callback(new Error('请输入手机号'))
                } else {
                  //校验通过
                  callback()
                }
              },
              trigger: 'blur',
            },
          ],
        },
      }
    },
    // mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    mounted () {
      this.search()
      this.ss()
    },
    methods: {
         // 导出数据
         exportData() {
      // 1.定义表头对应关系
      const headers = {
        'Id': 'id',
        '发车时间': 'departureTime',
        '回程时间': 'flybackTime',
        '目的地': 'destination',
        '申请人名称': 'proposerName',
        '联系人': 'contactsName',
        '乘车人数': 'price',
        '联系手机': 'phone',
        '司机性质': 'driver',
        '是否过夜': 'overnight',
        '需求说明': 'requirements',
      }
      // 懒加载
      import('@/excel/Export2Excel').then(async excel => {
        // excel是引入文件（也就是@/ventor/Export2Excel）的导出对象
        // 获取所有的数据
        const  rows  =this.tableData;
        // console.log(rows);
    
        const data = this.formatJson(headers, rows) // 返回的data就是我们转化后的数据
        excel.export_json_to_excel({
          // 要求转出的表头是中文
          header: Object.keys(headers), // 表头 必填
          data, // //具体数据 必填
          filename: '车辆预定excel', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
        // 拿到的数据是这种
        //  [{ username: 'xxx', mobile: 'xxx', ... }, { username: 'xxx', mobile: 'xxx', ... }]
        // 要转化的是如下这种
        // header: ['姓名', '手机号', '入职日期', ...]
        // data: [['张三', '138xxxxxxxx', '1992-08-04', ...], ['李四', '135xxxxxxxx', '1992-08-04', ...]]
      })
    },
    formatJson(headers, rows) {
      return rows.map(item => {
        // console.log(item)
        return Object.keys(headers).map(k => {
          if (headers[k] === 'timeOfEntry' || headers[k] === 'correctionTime') {
            return formatDate(item[headers[k]]) // 返回格式化之前的时间
          } else if (headers[k] === 'formOfEmployment') {
            return EmployeeEnum.hireType[item.formOfEmployment] ? EmployeeEnum.hireType[item.formOfEmployment] : '未知'
          }
          return item[headers[k]]
        })
      })
    },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        this.params.pageSize = val
        this.search()
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
        this.params.pageIndex = val
        this.search()
      },
      async search (count) {
        const url = '/vueboot/car/list'
        const { data: res } = await this.$ajax.get(url, {
          params: {
            pageIndex: this.params.pageIndex,
            limit: this.params.pageSize,
            destination: this.params.destination, //目的地
            proposer: this.params.proposer, //申请人名称
            contactsName: this.params.contactsName, //联系人
            departureTime: this.params.departureTime, //发车时间
            flybackTime: this.params.flybackTime, //回程时间
            staticId: count, //状态
          },
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        console.log(res)
        this.tableData = res.data.records
        this.params.total = res.data.total
      },
      async ss () {
        const url = '/vueboot/examineApprove/geta'
        const { data: res } = await this.$ajax.get(url, {
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        console.log(res)
        this.did = res.data

      },

      showAddDialog () {
        this.addDialogVisible = true
      },
      showAddDialogs () {
        this.addDialogVisibles = true
      },
      addUser (car) {
        this.$refs[car].validate(async (valid) => {
          if (valid) {
            const url = '/vueboot/car/add'
            const { data: res } = await this.$ajax.post(
              url,

              this.car,

              {
                // data:car,
                headers: {
                  token: localStorage.getItem('token'),
                },
              }
            )
            console.log(res)
            if (res.data > 0) {
              this.$message({
                message: '添加成功',
                type: 'success',
              })
              this.addDialogVisible = false
              this.search()
              this.car = {
                departureTime: '', //发车时间
                flybackTime: '', //回程时间
                destination: '', //目的地
                proposerName: '', //申请人名称
                contactsName: '', //联系人
                price: '', //乘车人数
                phone: '', //联系手机
                driver: 0, //司机性质
                overnight: 1, //是否过夜
                requirements: '', //需求说明
              }
            } else {
              this.$message.error(res.msg)
              //  this.$message.error("添加失败");
            }
          }
        })
      },
      // 根据id删除
      async deletes (row) {
        console.log(row)
        const url = '/vueboot/car/deleteById'
        const { data: res } = await this.$ajax.get(url, {
          params: {
            id: row.id
          },
          headers: {
            token: localStorage.getItem('token')
          }
        })
        if (res.data > 0) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.search()
        } else {
          this.$message.error(res.msg)
        }
      },
      // 根据id查看用户
      async selectById (row) {
        console.log(row)
        const url = '/vueboot/car/selectById'
        const { data: res } = await this.$ajax.get(url, {
          params: {
            id: this.id,
          },
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        if (res > 0) {
          this.$message({
            message: '修改成功',
            type: 'success',
          })
          this.editDialogVisible = false
          this.search()
        } else {
          this.$message.error('修改失败')
        }

        // this.user.usrName = row.usrName
        // this.did = row.usrId
        this.editDialogVisible = true
      },
      auditUpdate (row) {
        this.car.id = row.id//办公家具申领id
        this.audit = true
      },
      async updateAudit () {
        const url = '/vueboot/car/audit'
        this.$ajax.get(url, {
          params: {
            staticId: this.car.staticId,
            id: this.car.id
          }
        }).then(res => {
          if (res.data == '1') {
            this.search()
            this.$message({
              type: 'success',
              message: '审核成功'
            })
            this.audit = false
          } else {
            this.$message.error = '审核失败'
            this.search()
            this.$message({
              type: 'error',
              message: '审核失败'
            })
            this.audit = false
          }
        })
      }
    },

  }
</script>
<style>
  .breadcrumb {
    height: 30px;
  }
</style>
